<template>
  <div>
    <div class="app_top_div">
      <div class="xm_tab">
        <tab
          bar-active-color="#0BA6C7"
          v-model="viewType"
          active-color="#0BA6C7"
          :line-width="1"
          custom-bar-width="60px"
        >
          <tab-item :selected="viewType==0" @on-item-click="changeTab">所有<div class="shu_line_one_px_tab"></div></tab-item>
          <tab-item :selected="viewType==1" @on-item-click="changeTab">加分<div class="shu_line_one_px_tab"></div></tab-item>
          <tab-item :selected="viewType==2" @on-item-click="changeTab">扣分</tab-item>
        </tab>
      </div>
      <selectYearAndTeam @okEvent="selectYearAndTeamOkEvent" :startDateStr="startDateStr" :endDateStr="endDateStr" ref="selectReason"></selectYearAndTeam>
     </div>
    <div class="my_score_total_div all_fen" v-if="viewType==0" style="background:url('./static/img/bgfendetail.png')">
          <div class="totol_top_div">
            <span class="title">成绩</span><span class="fen">{{fenAll}}分</span>
          </div>
          <div  class="totol_buttom_div">
               <flexbox :gutter="0">
                <flexbox-item><div  class="totol_buttom_info">
                    <span>奖励:</span> +{{fenAdd}}分
                    <div class="shu_line_one_px"></div>
                </div></flexbox-item>
                <flexbox-item><div  class="totol_buttom_info"><span>扣分:</span> {{fenDelete}}分</div></flexbox-item>
              </flexbox>
          </div>
    </div>
    <div class="my_score_total_div all_fen"  v-if="viewType==1" style="background:url('./static/img/bg-AwardMarks.png')">
          <div class="totol_top_div">
            <span class="title">累计</span><span class="fen">+{{fenAdd}}分</span>
          </div>
    </div>
    <div class="my_score_total_div all_fen"  v-if="viewType==2" style="background:url('./static/img/bg-DeductMarks.png')">
          <div class="totol_top_div">
            <span class="title">累计</span><span class="fen">{{fenDelete}}分</span>
          </div>
    </div>
    <div class="my_socre_data_list">
      <div
        class="green-box kaidan_box click_to_green kaidan_info_list_my"
        v-for="(order,index) in dataList"
        :key="index"
        @click="toOrderDetail(order.checkOrderId)"
      >
        <template v-if="viewType==0 || (viewType==1 && order.points>=0) || (viewType==2 && order.points<0)">
          <div class="kaidan_box_top" >
            <flexbox :gutter="0">
              <flexbox-item :span="5/10" class="user_group_div">
                <span class="span_status">{{ order.statusText }}</span>
                <span class="span_time">{{ order.showTimeStr}}</span>
              </flexbox-item>
              <flexbox-item :span="5/10" align="right">
                <span class="span_name">{{ order.orderNo}}</span>
              </flexbox-item>
            </flexbox>
          </div>
          <ul class="kaidan_buttom click_to_green">
            <li class="right_li">
              <span class="border_radus" :class="order.borderClass">{{ order.points>0 ? '+'+order.points : order.points }}分</span>
              {{order.orderCheckBigCateName}}-{{order.orderCheckItemName}}<span
                class="zuoqinag_span"
              >{{order.orderAppropriateExplain}}</span>
            </li>
          </ul>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import selectYearAndTeam from "../../components/selectYearAndTeam.vue";
import scoreService from "../../shared/service/scoreService";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { Tab, dateFormat, TabItem, Group, Cell } from "vux";
export default {
  components: {
    selectYearAndTeam,
    Group,
    dateFormat,
    Tab,
    TabItem,
    Cell
  },
  data() {
    var data = {
      dataList: [],
      viewType: this.$route.query.viewType,
      fenAll: 0,
      fenAdd: 0,
      fenDelete: 0,
      startDateStr:this.$route.query.startDateStr,
      endDateStr:this.$route.query.endDateStr,
      loginUserId: this.$cookie.getUserId()
    };
    if (!data.viewType) {
      data.viewType = 0;
    }else{
       data.viewType = parseInt( data.viewType);
    }
    return data;
  },
   mounted() {
     weixinService.initWx(wx);
  },
  methods: {
    selectYearAndTeamOkEvent(startDateStr, endDateStr) {
      this.changeTab();
      scoreService
        .getStuScore(this.loginUserId, startDateStr, endDateStr)
        .then(res => {
          var dataList = res.data;
          var fenALL = 0,
            fenAdd = 0,
            fenDelete = 0;
          for (let i = 0; i < dataList.length; i++) {
            var po = dataList[i];
            po.borderClass = po.points >=0 ? "color_green" : "color_red";
            switch (po.pointsType) {
              case 0:
                po.statusText = "撤回";
                po.borderClass = "color_grey_white";
                break;
              case 1:
                po.statusText = "生效";
                break;
              case 2:
                po.statusText = "撤消";
                po.borderClass = "color_grey_white";
                break;
            }
            po.showTimeStr = dateFormat(
              this.$commonUtil.getDate(po.creTime),
              "YYYY-MM-DD HH:mm"
            );

            fenALL += po.points;
            if (po.points >= 0) {
              fenAdd += po.points;
            } else {
              fenDelete += po.points;
            }
          }
          this.fenAll = fenALL;
          this.fenAdd = fenAdd;
          this.fenDelete = fenDelete;

          this.dataList = dataList;
        });
    },
    //列表-编辑 , 开单按钮
    toOrderDetail(id) {
        this.$router.push({ name: "check_order_detail", query: { viewType: "student" ,id: id } });
    },
    changeTab(){
        $('.view-router').scrollTop(0);
    }
  }
};
</script>

<style scoped>
@import "../../assets/scss/home.scss";
@import "../../assets/scss/score.scss";

/* 头的div */
.app_top_div {
    position:absolute;
    width:100%;
    top:0;
}
.view-router{
    padding-top: 94px;
}
.xm_tab {
  padding: 0 10%;
  background: white;
}
.xm_tab .vux-tab .vux-tab-item {
  background: linear-gradient(180deg, #fff, #fff, rgba(229, 229, 229, 0)) bottom
    left no-repeat;
}
.vux-tab {
  background: #f1fbff;
}

</style>
